<template>
	<div id="score_test">
		<div class="breadcrumb">
			<img src="../../../../static/img/appoinment_1.png" class="head_img">
			<span class="title">成绩管理</span>
			<el-button size="small" type="text" @click="toTestData" class="top_btn_1">体测数据</el-button>
			<el-button size="small" type="text" @click="toStandards" class="top_btn">体测标准</el-button>
		</div>

		<div class="search">
			<el-select v-model="test">
				<el-option v-for='item in tests' :label='item.name' :value='item.physicalId' :key="item.physicalId">
				</el-option>
			</el-select>
			<el-select v-model="grade">
				<el-option label="全部年级" value='0'></el-option>
				<el-option v-for='item in grades' :label='item.gradeName' :value='item.id' :key="item.id"></el-option>
			</el-select>
			<el-select v-model="college">
				<el-option label="全部学院" value='0'></el-option>
				<el-option v-for='item in colleges' :label='item.department' :value='item.department' :key="item.department">
				</el-option>
			</el-select>
			<el-button class="sel_btn" type="primary" @click="search" :disabled="!isHavePhysicalId">筛选</el-button>
		</div>

		<div class="list">
			<div class="list_head">
				<span class="head_name">
					<el-input type='text' placeholder="请输入学生姓名或者学号" icon="search" v-model="condition" @keyup.enter.native="search" :on-icon-click="search"
					 class="keyword"></el-input>
				</span>
				<el-button class="add_btn" type="primary" @click="add()" :disabled="!isHavePhysicalId">新增</el-button>
				<el-button class="import_btn" type="primary" @click="importScore()" :disabled="!isHavePhysicalId">导入成绩</el-button>
				<el-button class="export_all_btn" type="primary" @click="openExport()" :disabled="!isHavePhysicalId">导出成绩</el-button>
				<el-button class="export_some_btn" type="primary" @click="openExportError()" :disabled="!isHavePhysicalId">导出未测/不及格名单</el-button>
			</div>
			<el-table :data="list" @cell-click="detail">
				<el-table-column type="expand" @click="stopPre">
					<template scope="scope">
						<el-form label-position="right" inline class="demo-table-expand" label-width="150px">
							<el-form-item label="身高体重：">
								<span>{{scope.row.shengao}}</span>
							</el-form-item>
							<el-form-item label="肺活量：">
								<span>{{ scope.row.feihuoliang }}</span>
							</el-form-item>
							<el-form-item label="50米跑：">
								<span>{{ scope.row.shortRun }}</span>
							</el-form-item>
							<el-form-item label="立定跳远：">
								<span>{{ scope.row.tiaoyuan }}</span>
							</el-form-item>
							<el-form-item label="坐位体前屈：">
								<span>{{ scope.row.qianqu }}</span>
							</el-form-item>
							<el-form-item label="引体向上/仰卧起坐：">
								<span>{{ scope.row.xiangshang }}</span>
							</el-form-item>
							<el-form-item label="1000米/800米跑：">
								<span>{{ scope.row.longRun }}</span>
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="姓名">
				</el-table-column>
				<el-table-column prop="gender" label="性别">
				</el-table-column>
				<el-table-column prop="campusId" label="学号">
				</el-table-column>
				<el-table-column prop="extra" label="附加分">
				</el-table-column>
				<el-table-column prop="totalScore" label="总评成绩">
				</el-table-column>
				<el-table-column prop="level" label="等级">
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
				 :total="totalCount" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>
		<el-dialog title="导出成绩" :visible.sync="dialogFormVisible" center>
			<el-form :model="importForm" ref="importForm" :label-width="formLabelWidth" :rules="rules">
				<div class="mytitle">您可以选择不同年级进行导出，体测名称和年级必须选择。</div>
				<el-form-item label="体测名称" required>
					<el-select v-model="importForm.test">
						<el-option v-for='item in tests' :label='item.name' :value='item.physicalId' :key="item.physicalId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属年级" required>
					<el-checkbox-group v-model="importForm.grade">
						<el-checkbox v-for='item in grades' :label='item.id' :key="item.id">{{item.gradeName}}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="exportScore()">确定</el-button>
				<el-button :plain="true" type="primary" @click="dialogFormVisible = false">取 消</el-button>
			</div>
		</el-dialog>

		<el-dialog title="导出未测/不及格成绩" :visible.sync="dialogFormVisible_error" center>
			<el-form :model="importErrorForm" :label-width="formLabelWidth">
				<div class="mytitle">您可以选择不同年级进行导出，体测名称和年级必须选择。</div>
				<el-form-item label="体测名称" required>
					<el-select v-model="importErrorForm.test">
						<el-option v-for='item in tests' :label='item.name' :value='item.physicalId' :key="item.physicalId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属年级" required>
					<el-checkbox-group v-model="importErrorForm.grade">
						<el-checkbox v-for='item in grades' :label='item.id' :key="item.id">{{item.gradeName}}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="exportErrorScore()">确定</el-button>
				<el-button :plain="true" type="primary" @click="dialogFormVisible_error = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				test: "",
				actionUrl: "",
				list: [],
				rules: {},
				tests: [],
				grades: [],
				headers: {},
				colleges: [],
				importForm: {
					test: "",
					grade: []
				},
				importErrorForm: {
					test: "",
					grade: []
				},
				totalCount: 0,
				formLabelWidth: "100px",
				dialogFormVisible: false,
				dialogFormVisible_error: false,
				grade: this.$util.getUrlParam("grade") || "0",
				college: this.$util.getUrlParam("college") || "0",
				condition: this.$util.getUrlParam("keyword") || "",
				currentPage: this.$util.getUrlParam("pageNum") * 1 || 1,
				isHavePhysicalId: false
			};
		},
		mounted() {
			this.getGrades();
			this.getAllTest();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//search
			search() {
				if (!this.test) {
					return;
				}
				this.currentPage = 1;
				this.getScoreList();
			},
			//获取体测下拉列表
			getAllTest() {
				let url = this.$util.domain + "/physicaltest/common/testitemlist";
				this.tests = [];

				this.$http({
					url,
					method: "POST"
				}).then(response => {
					if (response.data.error == 10000) {
						if (response.data.data && response.data.data.length > 0) {
							this.tests = response.data.data;
							this.tests.forEach(item => (item.physicalId += ""));
							this.isHavePhysicalId = true;
							this.importForm.test = this.tests[0].physicalId;
							this.importErrorForm.test = this.tests[0].physicalId;

							this.getColleges();
						}
					}
				});
			},
			//获取所有年级
			getGrades() {
				let year = new Date().getFullYear();
				let yearArray = [];
				for (let i = 0; i < 7; i++) {
					yearArray.push({
						gradeName: year + "级",
						id: year + ""
					});
					year = year - 1;
				}
				this.grades = yearArray;
			},
			//获取所有学院
			getColleges() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/departments";
				this.colleges = [];

				if (this.$util.getUrlParam("physicalId")) {
					this.test = this.$util.getUrlParam("physicalId");
				} else {
					this.test = this.importForm.test;
				}

				this.$http({
					url,
					method: "GET",
					params: {
						rootUnid: this.user.rootUnid + ""
					}
				}).then(response => {
					if (response.data.error == 10000) {
						this.colleges = response.data.data;
						this.getScoreList();
					}
				});
			},
			//成绩列表
			getScoreList() {
				let url = this.$util.domain + "/physicaltest/physicaltestscorelist";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						pageSize: 10,
						grade: this.grade * 1,
						department: this.college,
						physicalId: this.test * 1,
						pageNum: this.currentPage * 1,
						keyword: this.condition.trimLeft()
					})
				}).then(response => {
					this.list = [];
					if (response.data.error == 10000) {
						if (response.data.data) {
							let dataList = response.data.data.data;
							this.totalCount = response.data.data.total;
							if (dataList && dataList.length > 0) {
								dataList.forEach((item, index) => {
									this.list.push({
										uid: item.uid,
										name: item.name,
										index: index + 1,
										campusId: item.campusId,
										physicalId: item.physicalId,
										gender: item.gender == 1 ? "男" : "女",
										level: this.levelFormat(item.totalLevel),
										longRun: item.run < 0 ? "" : item.run / 100,
										shortRun: item.run50 < 0 ? "" : item.run50 / 100,
										totalScore: item.total < 0 ? "" : item.total / 100,
										extra: item.extraPoint < 0 ? "" : item.extraPoint / 100,
										qianqu: item.sitAndReach < 0 ? "" : item.sitAndReach / 100,
										shengao: item.heightWeight < 0 ? "" : item.heightWeight / 100,
										xiangshang: item.upperAbdomen < 0 ? "" : item.upperAbdomen / 100,
										feihuoliang: item.vitalCapacity < 0 ? "" : item.vitalCapacity / 100,
										tiaoyuan: item.standingLongJump < 0 ? "" : item.standingLongJump / 100
									});
								});
							}
						}
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			//详情
			detail(row, column, cell, event) {
				let className = cell.className;
				if (className.indexOf("el-table__expand-column") > -1) {
					return;
				}
				let params = {
					uid: row.uid,
					grade: this.grade,
					extraPoint: row.extra,
					physicalId: this.test,
					college: this.college,
					pageNum: this.currentPage,
					keyword: encodeURI(this.condition.trimLeft())
				}
				this.$util.refreshTo("/#/test_scoreDetail", params);
			},
			stopPre(e) {
				e.stopPropagation();
			},
			//新增
			add() {
				let params = {
					grade: this.grade,
					college: this.college,
					physicalId: this.test,
					pageNum: this.currentPage,
					keyword: encodeURI(this.condition.trimLeft())
				}
				this.$util.refreshTo("/#/test_newScore", params);
			},
			//导入成绩
			importScore() {
				let params = {
					grade: this.grade,
					college: this.college,
					physicalId: this.test,
					pageNum: this.currentPage,
					keyword: encodeURI(this.condition.trimLeft())
				}
				this.$util.refreshTo("/#/test_scoreImport", params);
			},
			openExport() {
				let myArray = [];
				this.grades.forEach(item => myArray.push(item.id));
				if (this.tests.length > 0) {
					this.importForm.test = this.tests[0].physicalId;
				}
				this.importForm.grade = myArray;
				this.dialogFormVisible = true;
			},
			openExportError() {
				let myArray = [];
				this.grades.forEach(item => myArray.push(item.id));
				if (this.tests.length > 0) {
					this.importErrorForm.test = this.tests[0].physicalId;
				}
				this.importErrorForm.grade = myArray;
				this.dialogFormVisible_error = true;
			},
			//导出成绩
			exportScore() {
				if (this.importForm.grade.length <= 0) {
					return false;
				}

				if (!this.importForm.test) {
					return;
				}

				let grades = [];
				this.importForm.grade.forEach(item => grades.push(item * 1));
				let url = this.$util.domain + "/physicaltest/export/score";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						grades: grades,
						physicalId: this.importForm.test * 1
					})
				}).then(response => {
					if (response.data.error == 10000) {
						this.dialogFormVisible = false;
						location.href = response.data.data.url;
					} else if (response.data.error == -10000) {
						this.dialogFormVisible = false;
						this.$util.errorMsg("服务器开小差");
					} else {
						this.dialogFormVisible = false;
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			//导出不及格/未测成绩
			exportErrorScore() {
				if (this.importErrorForm.grade.length <= 0) {
					return false;
				}

				if (!this.importErrorForm.test) {
					return;
				}

				let grades = [];
				this.importErrorForm.grade.forEach(item => grades.push(item * 1));
				let url = this.$util.domain + "/physicaltest/export/nonscore";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						grades: grades,
						physicalId: this.importErrorForm.test * 1
					})
				}).then(response => {
					if (response.data.error == 10000) {
						this.dialogFormVisible_error = false;
						location.href = response.data.data.url;
					} else if (response.data.error == -10000) {
						this.dialogFormVisible_error = false;
						this.$util.errorMsg("服务器开小差");
					} else {
						this.dialogFormVisible_error = false;
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			//分页回调
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getScoreList();
			},
			//转换等级
			levelFormat(level) {
				let levelText;
				switch (level) {
					case -99999:
						levelText = "未完成";
						break;
					case 1:
						levelText = "优秀";
						break;
					case 2:
						levelText = "良好";
						break;
					case 3:
						levelText = "及格";
						break;
					case 4:
						levelText = "不及格";
						break;
				}

				return levelText;
			},
			toStandards() {
				location.href = "/#/standards";
			},
			toTestData() {
				location.href = "/#/dataStatistics";
			}
		}
	};
</script>

<style>
	#score_test {
		padding-top: 60px;
		height: calc(100% - 100px);
	}

	#score_test .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #f7fcff;
		cursor: pointer;
	}

	#score_test .list {
		min-height: calc(100% - 160px);
	}

	#score_test .mytitle {
		color: #48576a;
		margin-left: 30px;
		margin-bottom: 20px;
	}

	#score_test .search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		height: 60px;
		line-height: 60px;
		padding: 0 25px;
	}

	#score_test .sel_btn {
		position: absolute;
		right: 55px;
		margin-top: 12px;
	}

	#score_test .add_btn {
		position: absolute;
		right: 360px;
	}

	#score_test .import_btn {
		position: absolute;
		right: 265px;
	}

	#score_test .export_all_btn {
		position: absolute;
		right: 170px;
	}

	#score_test .export_some_btn {
		position: absolute;
		right: 0px;
	}

	#score_test .el-select {
		display: inline-block;
		width: 20%;
	}

	#score_test .keyword {
		width: 350px;
	}

	#score_test .demo-table-expand {
		font-size: 0;
		color: #99a9bf;
	}

	#score_test .demo-table-expand label {
		color: #99a9bf;
	}

	#score_test .demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
</style>